<template>
	<view class="my">
		
		<view class="my-card" v-for="(item,index) in list" :key="index">
			<view class="card-left">
				<view class="card-img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="card-text">
					<view class="text-name">
						{{item.username}}
					</view>
					<view class="text-role">
						<view class="role-main" v-if="item.role == 'student'">
							<text>学生</text>
						</view>
						<view class="role-main" v-if="item.role == 'enterprise'">
							<text>企业</text>
						</view>
					</view>
				</view>
			</view>

			<view class="card-edit">
				<view class="edit-main" @tap="gojianli()" v-if="item.role == 'student'">
					<text>个人简历</text>
				</view>
				<view class="edit-main" @tap="goqiyemsg()" v-if="item.role == 'enterprise'">
					<text>企业信息</text>
				</view>
			</view>
		</view>
		<view class="my-main">
			<view class="main-bg" v-for="(item,index) in list" :key="item.id">
				<view class="main-box">
					<view class="box-a" v-if="item.role!==''">
						<view class="img" @tap="gomyform()">
							<image src="/static/img/bianji.png" mode=""></image>
						</view>
						<text>编辑资料</text>
					</view>
					<view class="box-a" v-if="item.role!==''">
						<view class="img" @tap="gochangepwd()">
							<image src="/static/img/shuo.png" mode=""></image>
						</view>
						<text>重置密码</text>
					</view>
					<view class="box-a" v-if="item.role==''">
						<view class="img" @tap="gologin()">
							<image src="/static/img/chukou.png" mode=""></image>
						</view>
						<text>登录</text>
					</view>
					<view class="box-a" v-if="item.role!==''">
						<view class="img" @tap="logout()">
							<image src="/static/img/chukou.png" mode=""></image>
						</view>
						<text>退出登录</text>
					</view>
				</view>
				<view class="main-box2">
					<view class="box-a" v-if="item.role == 'enterprise'">
						<view class="img" @tap="goaddmage()">
							<image src="../../static/img/add.png" mode=""></image>
						</view>
						<text>发布信息</text>
					</view>
					<view class="box-a" v-if="item.role == 'user'">
						<view class="img" @tap="gocertification">
							<image src="/static/img/certification.svg" mode=""></image>
						</view>
						<text>账号认证</text>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import axios from "axios"
import Cookies from "js-cookie"
import store from "@/store/index.js"


	export default {
		
		data() {
			return {
				username: '',
				user: '',
				list: [{
					id: 1,
					username: '请先登录',
					role: '',
					img: '/static/img/user.svg',
				}],
			}
		},
		onShow() {

		},
		computed:{
			// userlist (){
			// 	return this.$store.state.userlist
			// }
			
		},

		mounted() {
			const username = Cookies.get("username")
			// this.user = username
			const userlist = uni.getStorageSync('userlist')
			if(this.userlist == null && username){
			// if (username && this.$store.state.userlist.lenght == undefined) {
				axios.get(
					'/api/username?username=' + username,
				).then(res => {
					// console.log(res.data)
					this.list = res.data
					uni.setStorage({
						key:'userlist',
						data:res.data
					})
					// store.commit('setuserlist',res.data)
				}).then(res =>{
					axios.get("/api/getjianli?username=" + username).then(res=>{
						uni.setStorage({
							key:'userjianli',
							data:res.data
						})
					})
				})
				.catch(res => {
					console.log('404');
				})
			} else if(username){
				this.list = uni.getStorageSync('userlist')
				// this.list = [{
				// 	id: 1,
				// 	name: '请先登录',
				// 	role: '0',
				// 	img: '/static/img/user.svg',
				// }]
				// this.user = ''
			}else {
				console.log("未登录");
			}

		},
		onLoad() {


		},
		methods: {
			
			gochangepwd() {
				uni.navigateTo({
					url:'/pages/my/changepwd'
				})
			},
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			gojianli() {
				uni.navigateTo({
					url: '/pages/my/xuesheng/jianli'
				})
			},
			goqiyemsg() {
				uni.navigateTo({
					url: '/pages/my/qiye/qiyemsg'
				})
			},
			gocertification() {
				uni.navigateTo({
					url: '/pages/my/certification'
				})
			},
			gomyform() {
				uni.navigateTo({
					url: '/pages/my/myform/myform'
				})
			},
			goaddmage() {
				uni.navigateTo({
					url: 'qiye/zhaopin-list/zhaopin-list'
				})
			},
			qingqiu() {
				axios.get("/api/user").then(res => {
					console.log(res.data);
				})

			},
			logout() {
				axios.get("/api/logout").then(res => {
					// console.log('退出登录');
					Cookies.remove('username')
					// uni.removeStorageSync('token')
					// uni.removeStorageSync('username')
				}).then(res => {
					uni.showToast({
						mask: true,
						title: '退出登录',
						icon: "success",

					}).then(res => {
						this.$router.go(0)
					}).then(res => {
						uni.removeStorageSync('userlist')
						uni.removeStorageSync('userjianli')
						// this.user = '';
						// this.list = [{
						// 	id: 1,
						// 	name: '请先登录',
						// 	role: '0',
						// 	img: '/static/img/user.svg',
						// }]
					})
					// setTimeout(() => {

					// }, 500)

				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.my {
		width: 100%;
		height: 100%;
	}


	.my-card {
		width: 100%;
		height: 300rpx;
		background-color: #FFCC99;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 8%;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;

		.card-left {
			display: flex;
			align-items: center;
		}

		.card-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.card-text {
			width: 180rpx;
			margin-left: 20rpx;

			.text-name {
				font-size: 40rpx;
				color: white;
			}

			.text-role {
				width: 100rpx;
				text-align: center;
				background-color: #99CCCC;
				border-radius: 10px;
			}
		}

		.card-edit {
			color: white;
			font-weight: bold;

		}

		.edit-login {
			font-size: 40rpx;
			color: #FF6666;
			margin: auto;
			line-height: 80rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.my-main {
		width: 100%;
		height: 100%;
		padding: 20rpx 40rpx 0 40rpx;

		.main-bg {
			width: 100%;
			height: 100%;
			border-radius: 20px;
			background-color: #99CCCC;
		}

		.main-box,
		.main-box2 {
			width: 100%;
			height: 100%;
			border-radius: 20px;
			// margin-top: 10rpx;
			background-color: #99CCCC;
			display: flex;
			align-content: center;
		}

		.main-box2 {
			border-radius: 20px;
			background-color: #3399CC;
		}

		.box-a {
			width: 100%;
			height: 100%;
			padding: 10rpx;
			margin: auto;
			text-align: center;

			.img {
				width: 100rpx;
				height: 100rpx;
				margin: auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}


</style>
